import styled from "styled-components";

const ProductItemStyle = styled.div`
  .wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 1px 3px 1px #8d8b8b;

    .cover {
      height: 25.87064vw;

      .adm-image {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .content {
      padding: 3px;
    }

    .title {
      font-size: 14px;
      font-weight: 600;
    }

    .org {
      margin: 10px 0;
      color: #988f8f;
      width: fit-content;
    }

    .price {
      display: flex;
      align-items: center;

      .originP {
        text-decoration: line-through;
        font-size: 13px;
        margin-left: 3px;
      }

      .nowP {
        color: #f3a51b;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .location {
      position: absolute;
      bottom: 3px;
      right: 3px;
      font-size: 12px;
      max-width: 6em;
      ${(props) => props.theme.displayOneLine}
    }
  }
`;

export default ProductItemStyle;
